<template>
    <div class="mySelf" v-show="myself">

        <!-- <Refresh></Refresh> -->


        <div   v-show="topshow" class="Top_top">
            <div class="headimg">
                <ul>
                    <li @click="LookbigHeadimg()" style="width:35%">
                    <img class="wrapperheadimg" @click="onClickShow" style="width:100%;height:100%;border-radius:50%" src="" alt="头像"> 
                    <van-overlay :show="show" @click="onClickHide">
                        <div class="wrapper">
                                <img class="wrapperheadimg" style="width:100px;height:100px;border-radius:50%" src="" alt="头像"> 
                        </div>
                    </van-overlay>
                    
                    </li>
                    <li style="width:55%">
                        <span class="nickname" style="color:white">
                            
                        </span>
                    </li>
                </ul>
            </div>
            <div class="editmessage">
                <div class="top_tools">
                    <!-- <li @click="personSearch()">
                        <i class="iconfont icon-sousuo1"></i>
                    </li> -->
                    
                    <li style="float:right">
                        <router-link to="/setup" style="color:black">
                            <i class="iconfont icon-shezhi"></i>
                        </router-link>
                        
                    </li>
                </div>
                <button>
                    <router-link to="/personinformation"  style="color:black">编辑资料</router-link>
                </button>

                
            </div>
        </div>


        <div  v-show="nologincontain"  class="nologinTop_top">
            <button>
                <router-link to="/login" style="color:gray">
                立即登录/注册
                </router-link>
            </button>
        </div>



        <div   v-show="centershow" class="Center">
                <div class="Top_text">
                    <ul>
                        <li>
                            <p class="text_top">动态</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li @click="lookattentionlist()">
                            <p class="text_top">关注</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li  @click="lookfanslist()"> 
                            <p class="text_top">粉丝</p>
                            <p class="text_bottom"></p>
                        </li>
                        <li>
                            <p class="text_top">点赞</p>
                            <p class="text_bottom"></p>
                        </li>
                    </ul>
                </div>
            <div class="Tools">
                <div class="Tools_top">
                    <span style="margin-left:5%"><b>每日乐圈</b></span>
                    <!-- <span style="margin-right: 2%;font-size: 0.2rem;float: right;margin-top: 2.2%;">更多</span> -->
                </div>
                <ul>
                    <li @click="gomyjz()">
                        <p class="icon">
                            <i style="color:#e3b54c" class="iconfont icon-liulanlishi"></i>
                        </p>
                        <p>
                            <!-- 浏览历史 -->
                            <!-- 我的报名 -->
                            我的兼职
                        </p>
                    </li>
                    <li @click="gomydt()">
                        <p  class="icon">
                            <i style="color:#d81e06" class="iconfont icon-shouye_dongtailiang"></i>
                        </p>
                        <p>
                            我的动态
                        </p>
                    </li>
                    <li @click="gomyhd()">
                            <p  class="icon">
                                <i style="color:#1296db" class="iconfont icon-dengpao"></i>
                            </p>
                            <p>
                                <!-- 创作中心 -->
                                我的活动
                            </p>
                    </li>
                    <li @click="gomyxh()">
                        <p  class="icon">
                            <i style="color:#d4237a" class="iconfont icon-xihuan"></i>
                        </p>
                        <p>
                            我的喜欢
                        </p>
                    </li>
                </ul>
            </div>

            <div class="contain">
                <div class="contain_text">
                    <ul> 
                        <li @click="showtextbottom()" v-for="(textli,index) in textlist" :key="index">
                            {{textli.title}}
                            <div  class="textifshow" ></div>
                        </li>
                    </ul>
                </div>
                <div class="contain_contain">
                    <mycollect></mycollect>
                </div>
            </div>


        </div>
        <MyFoot  v-show="footshow"></MyFoot>

        <!-- <div class="search" v-show="search"> -->
            <div class="search" style="display: block;">
                        <p style="width:100%">
                        <i @click="showperson()" v-show="search" style="color:black;padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
                        <select style="width:100%" v-show="search">
                            <option style="text-align:center" value="查询喜欢列表">查询喜欢列表</option>
                            <option style="text-align:center" value="查询收藏列表">查询收藏列表</option>
                            <option style="text-align:center" value="查询帖子列表">查询帖子列表</option>
                        </select>    
                    </p>    
                    <form  style="padding: 0;margin: auto;margin-top: 0;width: 100%; "  v-show="search"  action="/">    
                                <van-search
                                    show-action
                                    placeholder="请输入动态或关键词"
                                />
                    </form>
            </div>

        <router-view/>


       



        <!-- 粉丝列表 -->
        <div class="fans" v-show="detailfans">
            <span style="float:left" @click="backmyself()">
                    <b>
                        <i  style="padding: 0.2rem;" class="iconfont icon-xiangzuojiantou"></i>
                    </b>
            </span>
            <h3 style="text-align: center;">
                    <b>设置</b>
            </h3>
                    <a class="oneNotice" href="javascript:;">
            <div class="headPic">
                <van-image 
                    width="1.3rem" 
                    height="1.3rem" 
                    radius="100%" 
                    fit="cover" 
                    :src="require('../../assets/img/1.jpg')" 
                />
            </div>
            <div class="detail">
                <div class="detailLeft">
                    <p>粉丝名字</p>
                    <p>简介</p>
                    <p>时间</p>
                </div>
                <div class="detailRight">
                    <button class="followBtn">关注</button>
                </div>
            </div>
        </a>
        </div>
        



        <!-- 关注列表 -->
        <div class="attention" v-show="detailattention">
            <span style="float:left" @click="backmyself()">
                    <b>
                        <i  style="padding: 0.2rem;" class="iconfont icon-xiangzuojiantou"></i>
                    </b>
            </span>
            <h3 style="text-align: center;">
                    <b>设置</b>
            </h3>
        <a class="oneNotice" href="javascript:;">
            <div class="headPic" >
                <van-image 
                    width="1.3rem" 
                    height="1.3rem" 
                    radius="100%" 
                    fit="cover" 
                    :src="require('../../assets/img/1.jpg')" 
                />
            </div>
            <div class="detail">
                <div class="detailLeft">
                    <p>关注者名字</p>
                    <p>简介</p>
                    <p>时间</p>
                </div>
                <div class="detailRight">
                    <button class="followBtn">取关</button>
                </div>
            </div>
        </a>
        </div>

        <p id="userid" style="display:none"></p>

    </div>
    
</template>

<script>

import personinformation from "./Personinformation.vue"

import axios from 'axios'
import  {mapState} from 'vuex'

import Theme from '../common/Theme.vue'
import Search from '../common/Search.vue'
import MyFoot from '../common/MyFoot.vue'

import mycollect from '../myself/Mycollect.vue'

import Report from '../common/post/Report.vue'
import Talk from '../common/post/Talk.vue'
import Like from '../common/post/Like.vue'
import Love from '../common/post/Love.vue'



import jwtDecode from 'jwt-decode'
import Refresh from '../refresh/Refresh.vue'



export default {
    name:'Myself',
    components:{
        Theme,Search,MyFoot,Report,Talk,Like,Love,personinformation,Refresh,mycollect
    },
    //挂载
    computed: {
        ...mapState(['token']),

    },
    mounted(){
        console.log(sessionStorage)
        if(sessionStorage.length==0){
            this.nologincontain=true
            this.topshow=false
        }else{
            //此处进行判断是否展示个人信息页面
            this.nologincontain=false
            this.topshow=true
            let token=sessionStorage.getItem("token")
            console.log(token)
            //解析token 
            const decode =  jwtDecode(token);
            console.log(decode);
            //赋值用户id
            var userid  = document.getElementById("userid");
            userid.innerHTML=decode.userId;
            //赋值用户昵称
            var nickname  = document.getElementsByClassName("nickname")[0];
            nickname.innerHTML=decode.nickname;
            //赋值用户粉丝数
            var text_bottomtwo = document.getElementsByClassName("text_bottom")[2];
            text_bottomtwo.innerHTML=decode.fans
            //赋值用户关注数
            var text_bottomone = document.getElementsByClassName("text_bottom")[1];
            text_bottomone.innerHTML=decode.followee
            //赋值用户头像
            var wrapperheadimg  = document.getElementsByClassName("wrapperheadimg")[0];
            var wrapperheadimgbig  = document.getElementsByClassName("wrapperheadimg")[1];
            wrapperheadimg.src=decode.img
            wrapperheadimgbig.src=decode.img
            //此处展示作者点赞的个数
            console.log(JSON.parse(sessionStorage.getItem("token")))
            console.log("1111111111111111111")
            axios({
                url:'/like/likeCount',
                method:'get',
                params:{
                    userId:userid.innerHTML
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                console.log(data)
                var text_bottomthree  = document.getElementsByClassName("text_bottom")[3];
                text_bottomthree.innerHTML=data.data.data
            }).catch(err => {
                console.log(err)
            })

            //此处展示作者动态个数
            axios({
                url:`/usersPosts/postsCounts?userId=${userid.innerHTML}`,
                method:'get',
                headers:{
                   'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                var text_bottomzero = document.getElementsByClassName("text_bottom")[0];
                console.log(data)
                console.log("动态数量遍历完成")
                text_bottomzero.innerHTML=data.data.data.data
            }).catch(err => {
                console.log(err)
            })




            

        }


    },
    data(){
        return{
            allcollect:[],
            myself:true,
            nologincontain: false,
            detailattention: false,
            detailfans: false,
            show: false,
            textshow:true,
            texthide:false,
            centershow:true,
            topshow:true,
            footshow:true,
            search:false,
            textlist:[
                // {title:"动态",index:"1"},
                // {title:"历史",index:"2"},
                // {title:"喜欢",index:"3"},
                {title:"收藏",index:"4"},
            ],

        }
    },
    methods:{

        //去我的兼职
        gomyjz(){
            if(sessionStorage.length==0){
            }else{
                this.$router.push('/myhistory');
            }
        },
        //去我的活动
        gomyhd(){
            if(sessionStorage.length==0){
            }else{
                this.$router.push('/activityyes');
            }
        },
        //去我的动态
        gomydt(){
            if(sessionStorage.length==0){
            }else{
                this.$router.push('/myrelease');
            }
        },
        //去我的喜欢
        gomyxh(){
            if(sessionStorage.length==0){
            }else{
                this.$router.push('/mylike');
            }
        },
        //获取个人信息
        LookbigHeadimg(){
            console.log("查看头像大图")

        },
        //查看头像
        onClickShow() {
        this.show=true;
        },
        onClickHide() {
        this.show=false;
        },
        //搜索
        personSearch(){
            this.topshow=false;
            this.centershow=false;
            this.footshow=false;
            this.search=true;
            //自动获取input焦点
            // setTimeout("$('#searchinput').focus()",100);
        },
        //取消搜索
        showperson(){
            this.topshow=true;
            this.centershow=true;
            this.footshow=true;
            this.search=false; 
        },
        //查看粉丝列表
        lookfanslist(){
            if(sessionStorage.length==0){
            }else{
                var text_bottomtwo = document.getElementsByClassName("text_bottom")[2];
                if(text_bottomtwo.innerHTML=="0"){
                    console.log("无粉丝")
                }else{
                    console.log("1231645496")
                    this.topshow=false;
                    this.centershow=false;
                    this.footshow=false;
                    this.search=false; 
                    this.detailfans=true
                }

            }

        },
        //隐藏粉丝列表
        backmyself(){
            console.log("1231645496")
            this.myself=true;
            this.topshow=true;
            this.centershow=true;
            this.footshow=true;
            this.search=false; 
            this.detailfans=false;
            this.detailattention=false
        },
        //查看关注列表
        lookattentionlist(){
            if(sessionStorage.length==0){

            }else{
                var text_bottomone = document.getElementsByClassName("text_bottom")[1];
                if(text_bottomone.innerHTML=="0"){
                 
                    // console.log("无关注")
                }else{
                console.log("1231645496")
                this.topshow=false;
                this.centershow=false;
                this.footshow=false;
                this.search=false; 
                this.detailattention=true
                }

            }

        },
        //隐藏关注列表


        //标题的下栏
        showtextbottom(){
            console.log("12348787656")
            //点击谁给谁加上这个样式
        }

    },

}
</script>

<style lang="less" scoped>

//尚未登录
.nologinTop_top{
    background-image: url("../../assets/img/personpiture.png");
    background-size: cover;
    width:100%;
    height:4rem;
    display: flex;
    button{
        height: 30%;
        width: 40%;
        margin-left: 30%;
        margin-top: 15%;
        color: gray;
        background-color: transparent;
        border: 1px solid rgb(245 245 247);
        border-radius: 10%;
    }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
    width: 20%;
    height: 20%;
    margin-left: 20%;
    margin-right: 20%;
  background-color: #fff;
}



    .mySelf{
        font-size: 0.5rem;
        display: flex;
        height: 100vh;
        flex-direction: column;
        .Top_top{
            background-image: url("../../assets/img/personpiture.png");
            background-size: cover;
            width:100%;
            height:4rem;
            display: flex;
            div{
                flex:1;
            }
            .editmessage{
                .top_tools{
                    height: 20%;
                    // background-color: pink;
                    margin-top: 10%;
                    list-style: none;
                    float: right;
                    width:50%;
                    li{
                        float: left;
                        margin: 0px 10%;
                    }
                }
                button{
                    float: right;
                    color: black;
                    margin-right: 10%;
                    padding: 0.1rem;
                    border-radius: 0.1rem;
                    border: 1px solid transparent;
                    width: 45%;
                    margin-top: 10%;
                    font-size:0.2rem;
                }
                
            }
            .headimg{
                ul{
                    height: 100%;
                    width: 100%;
                    list-style: none;
                    li{
                        margin-top: 20%;
                        height: 45%;
                        float: left;
                        padding-left: 5%;
                    }
                    }
                }
        }
        .Center{
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            flex: 1;
            background-color: rgb(245 245 247);
            .Top_text{
                margin-top: 5%;
                color: gray;
                ul{
                    height: 100%;
                    width: 100%;
                    list-style: none;
                    display: flex;
                    li{
                        float: left;
                        flex: 1;
                        font-size: 0.4rem;
                        text-align: center;
                        padding: 0.1rem;
                        .text_top{
                            color:gray;
                        }
                        .text_bottom{
                            margin-top: 0.2rem;
                            color:black;
                        }
                    }
                }
            }
            .Tools{
                .Tools_top{
                    font-size: 0.6rem;
                    border-bottom: 1px solid rgb(245 245 247);
                    padding: 0.2rem;
                }
                margin-top: 5%;
                height: 5rem;
                border-radius: 0.6rem;
                background-color:white;
                ul{
                    width: 100%;
                    height: 80%;
                    list-style: none;
                    top: 6%;
                    position: relative;
                    li{
                        float: left;
                        width: 50%;
                        text-align: center;
                        height: 50%;
                        .icon{
                            display: flex;
                            justify-content: center;
                            font-size: 50px;
                        }
                        p{
                            font-size: 0.2rem;
                            height: 35%;
                            width: 100%;
                        }
                    }
                }
            }
        }
        .contain{
            // height: 50%;
             height: 10rem;;
            width: 100%;
            background-color: white;
            margin-top: 3%;
            flex: 1;
            overflow-y: scroll;
            .contain_text{
                padding: 0.2rem;
                ul{
                    width: 100%;
                    list-style: none;
                    display: flex; 
                    li{
                        text-align: center;
                        float: left;
                        flex: 1;
                    }
                }


            }
            .contain_contain{
                // height: 88%;
                display: flex;
                flex-direction: column;
                overflow-y: scroll;
            }
        }


    }


    .post{
        background-color: white;
        padding: 0.25rem;
        margin-bottom: 0.3rem;
        overflow: auto;
        .top{
            display: inline-flex;
            justify-content: space-between;
            flex-direction: row;
            padding-bottom: 0.2rem;
            width: 100%;
            a{
                display: inline-flex;
                align-items: center;
                color: #4b4b4b;
                font-size: 0.4rem;
                p{
                    margin-left: 0.1rem;
                }
            }
            
        }
        .font{
            margin-bottom: 0.2rem;
            font-size: @fontSmall;
        }
        .pic{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
            .van-image{
                margin-right: 0.15rem;
                margin-bottom: 0.2rem;
            }
            
        }
        .bottom{
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-evenly;
        }
    }


    .oneNotice{
        display: flex;
        padding: 0.25rem;
        border-top: solid 1px #dbdbdb;
        .headPic{
            display: flex;
            align-items: center;
        }
        .detail{
            flex: 1;
            display: flex;
            .detailLeft{
                margin-left: 0.3rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3b3b3b;
                p,i{
                    font-size: 0.35rem;
                }
                p{
                    &:nth-child(1){
                        color: black;
                        margin-bottom: 0.1rem;
                    }
                    &:nth-child(2){
                        margin-bottom: 0.2rem;
                    }
                }
            }
            .detailRight{
                display: flex;
                align-items: center;
                .followBtn{
                    background-color: var(--themeColor);
                    padding: 0.2rem 0.6rem;
                    border-radius: 100px;
                    color: white;
                    outline: none;
                    border: none;
                }
            }
        }
    }

    .textifshow{
        height: 0.02rem;
        width: 100%;
        background-color: rgb(245 245 247);
        // margin-left: 20%;
        margin-top: 0.1rem;
    }


    
</style>